$(function () {
    var data,
        color = '土豪金'

    $('.header').load('../header/header.html', function () {
        // load是ajax的异步操作
        // 加载完成后的回调函数
        const script = document.createElement('script');
        script.src = '../Home/js/header.js'
        document.body.appendChild(script)
    })
    $('.footer').load('../footer/footer.html', function () {
        // load是ajax的异步操作
        // 加载完成后的回调函数
    })
    $('.login-notic .main span').click(() => {
        $('.login-notic').css('display', 'none')
    })
    if (data == null || data.length == 0) {
        data = []
    }
    data = JSON.parse(localStorage.getItem('detaillist'));
    $('.product-con').html(`
                <h2>${data[data.length - 1].name}</h2>
                <p>${data[data.length - 1].describe}</p>
                <p>小米自营</p>
                <div class="price">
                    <span>${data[data.length - 1].price} 元<del>${Number(data[data.length - 1].price) + 100} 元</del></span>
                </div>
                <div class="line"></div>
                <div class="product-address">
                    <i class="iconfont">&#xe605;</i>
                    <div class="address-con">
                        <div class="address-info">
                            <span>北京</span>
                            <span>北京市</span>
                            <span>海淀区</span>
                            <span>清河街道</span>
                        </div>
                        <a href="javascript:void(0);">修改</a>
                        <div class="info">
                            有现货
                        </div>
                    </div>
                </div>
                <div class="option-box">
                    <div class="title">选择颜色</div>
                    <ul class="clearfix">
                        <li class="active"><a href="javascript:void(0);">${color}</a></li>
                        <li><a href="javascript:void(0);">曜石黑</a></li>
                        <li><a href="javascript:void(0);">青春粉</a></li>
                        <li><a href="javascript:void(0);">活力紫</a></li>
                    </ul>
                </div>
                <div style="margin-bottom: 30px;position: relative;"></div>
                <div class="selected-list">
                    <ul class="">
                        <li><i>${data[data.length - 1].name}${color}</i>
                            <span>${data[data.length - 1].price}元<del>${Number(data[data.length - 1].price) + 100}元</del></span>
                        </li>
                    </ul>
                    <div class="total-price">
                        <span style="display: none;">${data[data.length - 1].id}</span>
                        总计：${data[data.length - 1].price}元
                    </div>
                </div>
                <div class="btn-box">
                <div class="sale-btn">
                    <a href="http://localhost/mi/cart">加入购物车</a>
                </div>
                <div class="favorite-btn">
                    <a href="javascript:void(0);"><span class="iconfont">&#xeca1;</span>喜欢</a>
                </div>
            </div>
            <div class="after-sale-info">
                <a href="javascript:void(0);"><span class="iconfont">&#xe8bf;</span><i>小米自营</i></a>
                <a href="javascript:void(0);"><span class="iconfont">&#xe8bf;</span><i>小米发货</i></a>
                <a href="javascript:void(0);"><span class="iconfont">&#xe8bf;</span><i>7天无理由退货</i></a>
                <a href="javascript:void(0);"><span class="iconfont">&#xe8bf;</span><i>运费说明</i></a>
                <a href="javascript:void(0);"><span class="iconfont">&#xe8bf;</span><i>企业信息</i></a>
                <a href="javascript:void(0);"><span class="iconfont">&#xe8bf;</span><i>7天价格保护</i></a>
            </div>`)
    $('.imgleft').html(`
    <img src="${data[data.length - 1].imgurl}" alt="">
    `)
    $('title').html(`${data[data.length - 1].name}立刻购买`)



    //选择配色的时候，订单上面会更新颜色
    $('.option-box ul li').click(function () {
        $(this).siblings().removeClass('active')
        $(this).addClass('active')
        for (let i = 0; i < $('.option-box ul li').length; i++) {
            if ($('.option-box ul li')[i].className == 'active') {
                color = $('.option-box ul li')[i].innerText
                $('.selected-list').html(`
                                <ul class="">
                                    <li><i>${data[data.length - 1].name}${color}</i>
                                        <span>${data[data.length - 1].price}元<del>${Number(data[data.length - 1].price) + 100}元</del></span>
                                    </li>
                                </ul>
                                <div class="total-price">
                                    <span style="display: none;">${data[data.length - 1].id}</span>
                                    总计：${data[data.length - 1].price}元
                                </div>`)
            }
        }
    })

    //加入购物车
    let carList = [];
    $('.sale-btn a').click((event) => {
        carList = JSON.parse(localStorage.getItem('carlist'))
        // event.preventDefault()

        var goodObj = {
            id: $('.total-price span')[0].innerText,
            imgurl: $('.imgleft img')[0].src,
            name: $('.selected-list ul li i')[0].innerText,
            price: data[data.length - 1].price,
            describe: $('.product-con p').eq(0).text(),
            num: 0
        };
        console.log(goodObj.id, goodObj.imgurl, goodObj.name, goodObj.price, goodObj.num);
        if (carList == null) {
            carList = []
            goodObj.num = 1
        } else {
            goodObj.num = 0
        }
        if (carList.length === 0) {
            // 添加到carList
            carList.push(goodObj);
        } else {
            for (var i = 0; i < carList.length; i++) {
                // 如果商品已经存在cookie中，则数量+1
                if (carList[i].id === goodObj.id) {
                    carList[i].num++;
                    localStorage.setItem('carlist', JSON.stringify(carList))
                    break;
                } if (i === carList.length - 1) {
                    // 添加到carList
                    carList.push(goodObj);
                    localStorage.setItem('carlist', JSON.stringify(carList))
                }
            }
        }
        localStorage.setItem('carlist', JSON.stringify(carList))
    })

    var userName = [];
    userName = JSON.parse(localStorage.getItem('username'))
    if (userName == null || userName.length == 0) {
        userName = []
    } else {
        $('.login-notic').css('display', 'none')
    }

})
